<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/* *通配符:网页中所有标签默认的margin和padding清0;
			样式的第一行代码 */
			*{
				margin: 0;
				padding: 0;
			}
			body{
				width: 100vw;  /* vw:视宽 */
				height: 100vh;  /* vh: 视高 */
				position: relative;
				background: url('img/bacg.jpg') center/100% 100% no-repeat;
			}
			/* 全局 */
			input{
				border: 0;
				outline: none;
				font-size: 18px;
			}
			.register a{
				/* 去掉a标签的下划线 */
				text-decoration: none;
				width: 100px;
				height: 30px;
				border: #FFFFFF 2px solid;
				border-radius: 45px;
				display: inline-block;
				color: #FFFFFF;
				text-align: center;
				line-height: 30px;
			}
			.logo{
				position: absolute;
				top: 30px;
				left: 50px;
			}
			.register{
				position: absolute;
				top: 30px;
				right: 50px;
			}
			.login-main{
				position: absolute;
				top: 50%;
				left: 50%;
				/* 位移 */
				transform: translate(-50%,-50%);
				width: 460px;
				height: 520px;
				background: #FFFFFF;
				border-radius: 15px;
			}
			.login-li{
				width: 400px;
				height: 46px;
				margin: 20px auto;
				/* border: 1px solid red; */
				line-height: 46px;
			}
			h2{
				color: #fa911e;
				font-size: 26px;
				line-height: 46px;
			}
			.input-data{
				border: 1px solid #C0C0C0;
				border-radius: 20px;
			}
			.forget-login{
				float: right;
				color: #808080;
			}
			.login{
				width: 100%;
				height: 100%;
				border-radius: 20px;
				background-color: #FA911E;
				color: #FFFFFF;
				font-size: 24px;
			}
			.zhuce{
				width: 100%;
				height: 100%;
				color: #FA911E;
				font-size: 24px;
				background-color: #FFFFFF;
			}
			.login-other{
				position: relative;
				text-align: center;
			}
			.other::before,.other::after{
				display: inline-block;
				content: " ";
				width: 140px;
				height: 1px;
				background-color: #808080;
			}
			.other::before{
				position: absolute;
				top: 22px;
				left: 0px;
			}
			.other::after{
				position: absolute;
				top: 22px;
				right: 0;
			}
		</style>
	</head>
	<body>
		<div class="logo">
			<img src="img/logo.png"/>
		</div>
		<div class="register">
			<a href="#">注册</a>
			<a href="#">返回首页</a>
		</div>
		<div class="login-main">
			<!-- 第一行 -->
			<div class="login-li">
				<h2>问卷星登录</h2>
			</div>
			<!-- 第二行 -->
			<div class="login-li input-data">
				<img src="img/user.png" class="login-icon" />
				<input type="text" placeholder="用户名/Email/手机" class="text-font" />
			</div>
			<!-- 第三行 -->
			<div class="login-li input-data">
				<img src="img/password.png" alt="error" class="login-icon"/>
				<input type="password" placeholder="请输入登录密码" class="text-font" />
			</div>
			<!-- 第四行 -->
			<div class="login-li">
				<input type="checkbox"/><span class="auto-login"> 下次自动登录</span>
				<a href="#" class="forget-login">忘记用户名/密码？</a>
			</div>
			<!-- 第五行 -->
			<div class="login-li submit-login">
				<input type="submit" value="登录" class="login" />
			</div>
			<!-- 第六行 -->
			<div class="login-li btn-register">
				<input type="button" value="立即注册" class="zhuce"/>
			</div>
			<!-- 第七行 -->
			<div class="login-li login-other">
				<span class="other">第三方登录</span>
			</div>
		</div>
	</body>
</html>
